<template>
  <div>
    <el-row :class="['btnBar']">
    </el-row>
    <el-row v-if="imageListVisible">
      <div :class="['image-block']" v-for="(image,i) of imageList" :key="''+image[itemkeyName]"
           @mouseenter="handleMouseEnter(i)"
           @mouseleave="handleMouseLeave(i)"
           :style="'background-image:url('+imageServer+'/'+image[itemUrlName]+');background-size: 100% 100%;background-repeat:no-repeat;'">
        <div :class="{'zoom-btn':true,'opacity':focusIndex==i}" >
          <i class="el-icon-zoom-in" @click="handleZoomInButtonClick(image)"></i>
          <i class="el-icon-delete" @click="handleDeleteImageButtonClick(image)"></i>
        </div>
      </div>

      <el-upload :class="['image-block','el-upload']"
        :action="ossServer"
        :show-file-list="false"
        :on-success="handleUploadSuccess"
        multiple>
        <template slot="trigger">
          <div style="height: 100%">
            <div style="height: 30%;">
              <i class="el-icon-upload"></i>
            </div>
            <div style="color: red;text-align: center;height: 30%;">* 文件大小<1MB</div>
          </div>
        </template>
      </el-upload>
    </el-row>


    <el-dialog :visible.sync="isZoomInDialogVisiable">
      <img width="100%" :src="dialogImageUrl" alt="加载失败">
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "ImageListEdit",
    props: {
      data:{
        type:Array,
        default:undefined
      },
      itemUrlName:{
        type:String,
        default:'url'
      },

      itemkeyName:{
        type:String,
        default:'id'
      },
      ossServer:{
        type:String
      },
      imageServer: {
        type: String,
        default: ''
      }
    },

    data(){
      return {
        //图片清单
        imageList:[],
        size:0,
        imageListVisible:false,
        dialogImageUrl:'',
        //鼠标停留的item的下标
        focusIndex:-1,
        //放大图片的对话框显示开关
        isZoomInDialogVisiable:false
      }
    },


    watch: {

      data: {

        handler(newVal){
          if(newVal) {
            //做了深拷贝，为了子组件操作数据时不影响父组件中的数据
            this.imageList = JSON.parse(JSON.stringify(newVal));
            this.imageListVisible = true;
          }
        },
        immediate:true
      }
    },

    methods:{

      handleUploadSuccess(response, file, fileList){
        this.$emit('on-success',response,file,fileList);
      },

      handleMouseEnter(i){
        this.focusIndex = i;
      },

      handleMouseLeave(i){
        this.focusIndex = -1;
      },

      handleZoomInButtonClick(image){
        this.dialogImageUrl = this.imageServer+'/'+image[this.itemUrlName];
        this.isZoomInDialogVisiable = true;
      },

      handleDeleteImageButtonClick(image){
        this.$emit('on-remove',image);
      }

    }
  }
</script>

<style scoped>
  .image-block {
    margin: 10px;
    float: left;
    width: 148px;
    height: 148px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .el-upload{
    border: 1px dashed #3a3f4b;
    border-radius: 5px;
  }

  .zoom-btn{
    /*background-color: #3a3f4b;*/
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-size: 30px;
  }

  .opacity{
    opacity: 0.7;
  }
  .zoom-btn>i{
    margin-right: 10px;
    margin-left: 10px;
  }
</style>
